<html>
    <head>
        <title>用 v-for  把一个数组对应为一组元素</title>
    </head>
    <body>
        <script>
            // ★一、用 v-for 把一个数组对应为一组元素

                                /*
                                        我们可以用 v-for 指令基于一个数组来渲染一个列表。
                                        v-for指令需要使用 " item in items " 形式的特殊语法，其中 "items" 是源数据数组，而 item 则是"被迭代的数据元素的别名"。

                                        eg:
                                            <ul id="example-1">
                                                <li v-for="item in items" :key="item.message">
                                                    {{item.message}}
                                                </li>
                                            </ul>
                                */

                                /*
                                    在 v-for 块中，我们可以访问所有父作用域的 prperty.
                                    v-for 还支持一个可选的第二个参数，即当前想的索引。
                                */
                                            /*
                                                eg:
                                                    <ul id="example-2">
                                                        <li v-for="(item,index) in items">
                                                            {{ parentMessage}} -{{index}} -{{ item.message}}
                                                        </li>
                                                    </ul>
                                            */

                                            var example2= new Vue({
                                                el:'example-2',
                                                data:{
                                                    parentMessage:'parent',
                                                    items:[
                                                        {message:'Foo'},
                                                        {mesage:'Bar'}
                                                    ]
                                                }
                                            });


                                /*
                                    你也可以使用 of 替代 in 作为分隔符，因为它更接近 JS迭代器的语法：

                                    eg：
                                        <div v-for="item of items"></div>
                                */
                
        </script>
    </body>
</html>